<template>
  <div>
    <div style="height:44px;">
      <sticky scroll-box="vux_view_box_body" ref="sticky" :offset="0" :check-sticky-support="false" :disabled="disabled">
        <tab :line-width="1">
          <tab-item selected ><span @click="aa()">全部订单</span></tab-item>
          <tab-item><span @click="aa()">已完成</span></tab-item>
          <tab-item><span @click="aa()">进行中</span></tab-item>
          <tab-item><span @click="aa()">未通过</span></tab-item>
        </tab>
      </sticky>
    </div>
    <scroller lock-x  :height="h" use-pulldown :pulldown-config="pulldownDefaultConfig" @on-scroll-bottom="onScrollBottom" @on-pulldown-loading="onScrollTop" ref="scrollerBottom" :scroll-bottom-offst="200">
      <div >
        <div  v-for="i in bottomCount " :key="i.index" class="box2" >

           <div class="flexbox name">
             <p>订单编号：123456789</p>
             <p>2019/09/09</p>
           </div>
            <div class="flexbox">
             <p>订单名称：哈哈哈哈哈哈哈</p>
             <p>进行中</p>
           </div>
            <div class="textright">
           查看详情
           </div>
      
         </div>
        <load-more tip="加载中"></load-more>
      </div>
      
    </scroller>

  </div>
</template>

<script>
import {
  Tab,
  TabItem,
  Sticky,
  Scroller,
  LoadMore,
  Cell,
  Flexbox,
  FlexboxItem
} from "vux";
const pulldownDefaultConfig = {
  content: "下拉刷新",
  height: 40,
  autoRefresh: false,
  downContent: "下拉刷新",
  upContent: "释放后刷新",
  loadingContent: "正在刷新...",
  clsPrefix: "xs-plugin-pulldown-"
};
export default {
  components: {
    Tab,
    TabItem,
    Sticky,
    Scroller,
    LoadMore,
    Cell,
    Flexbox,
    FlexboxItem
  },
  data() {
    return {
      showSpace: false,
      disabled:
        typeof navigator !== "undefined" &&
        /iphone/i.test(navigator.userAgent) &&
        /ucbrowser/i.test(navigator.userAgent),
      onFetching: false,
      bottomCount:8,
      pulldownDefaultConfig: pulldownDefaultConfig,
      h:'-40'
    };
  },
mounted() {
  this.$nextTick(() => {
  this.$refs.scrollerBottom.reset({top: 0})
  })
},
  methods: {
    spaceChange() {
      this.showSpace = !this.showSpace;
      this.$nextTick(() => {
        this.$refs.sticky.bindSticky();
      });
    },
    onScrollBottom() {
      if (this.onFetching) {
        // do nothing
      } else {
        this.onFetching = true;
        setTimeout(() => {
          this.bottomCount += 10;
          this.$nextTick(() => {
            this.$refs.scrollerBottom.reset();
          });
          this.onFetching = false;
        }, 2000);
      }
    },
    onScrollTop() {
      setTimeout(() => {
        this.bottomCount =8;
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset();
          this.$refs.scrollerBottom.donePulldown()
        });
      }, 2000);
    },
    aa(){
  setTimeout(() => {
        this.bottomCount =8;
var top=document.querySelector('.xs-container');
top.setAttribute('style', 'transform-origin: 0px 0px 0px; transform: translateX(0px) translateY(0px) translateZ(0px) scale(1, 1); transition: none;');
        this.$nextTick(() => {
        this.$refs.scrollerBottom.reset();
          this.$refs.scrollerBottom.donePulldown()
        });
      }, 1000);
    }
  }
};
</script>
<style scoped>
.box2 {
  padding: 5px 10px;
  border-bottom: 1px solid #ddd;

}
.flexbox{
  display: flex;
  justify-content: space-between;
}
.flexbox p:nth-of-type(1){
  width: 60%;
}
.flexbox p:nth-of-type(2){
  width: 40%;
  text-align: right;
}
.flexbox.name{
  font-size: 12px;
}

.textright{
  text-align: right;
  font-size: 12px;
}
</style>